import styled from '@emotion/styled';
import { Dropdown, Menu, MenuProps, Tooltip } from 'antd';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { ICallProgressGroups } from '@/modules/interface';

const CallProgress = (props: { progress: number; groups: ICallProgressGroups[] }) => {
	const Container = styled.div`
		margin: 0 10px;
		padding: 0 20px;
		line-height: 28px;
		background-color: #252b48;
		color: #dee3fb;
		border-radius: 14px;
		font-size: 14px;
		cursor: pointer;
	`;

	const Text = styled.p`
		padding: 0 10px;
		margin: 0;
	`;

	const { t } = useTranslation();

	const getGroupNameLength = (groupName: string) => {
		if (!groupName) return '';
		if (groupName.length > 8) {
			return groupName.substring(0, 8) + '...';
		} else {
			return groupName;
		}
	};

	const showToolTip = (e: any, name: string) => {
		if (name.length < 8) {
			e.target.style.pointerEvents = 'none'; // 阻止鼠标事件
		}
	};

	const items: MenuProps['items'] = [
		{
			label: (
				<div>
					{props.groups.map(item => (
						<div key={item.groupId}>
							<Tooltip title={item.groupName}>
								<span onMouseEnter={e => showToolTip(e, item.groupName!)}>{`<${getGroupNameLength(item.groupName!)}>：${item.waitingNum}`}</span>
							</Tooltip>
						</div>
					))}
				</div>
			),
			key: '0'
		}
	];

	return (
		<Dropdown menu={{ items }} placement="bottom" overlayClassName={'call-progress-wrapper'}>
			<Container className="widget-call-progress">
				<Text>
					{t('call-progress-total')}：<span>{props.progress}</span>
				</Text>
			</Container>
		</Dropdown>
	);
};

export default CallProgress;
